<template>
    <div>
      <span style="font-size: larger; color: blue;">在这里你可以上传你想上传的文件</span>
    </div>
    <div>
      <span style="font-size: xx-large; margin-left: -80%;">上传文件</span>
      <div>
        <el-upload
          class="upload-demo"
          drag
          :action="''" 
          :file="file"
          :before-upload="handleBeforeUpload"
        >
          <el-icon class="el-icon--upload"><upload-filled /></el-icon>
          <div class="el-upload__text">
            拖拽文件到这 <em>或者点击此处</em>
          </div>
          <template #tip>
            <div class="el-upload__tip" style="font-size: larger;">
              图片大小不能超出1M
            </div>
          </template>
        </el-upload>
        <div style="margin-top: 10px;">
            <span style="margin-left: -95%;">上传地址:</span>
        </div>
        <div style="margin-top: 10px; ;">
          <el-input v-model="uploadurl" placeholder="在此处填写需要上传的地址" />
        </div>
        <div style="margin-top: 10px;">
            <span style="margin-left: -95%;">上传信息:</span>
        </div>
        <div style="margin-top: 10px;">
            <el-input v-model="uploadMsg" placeholder="请输入上传信息" />
        </div>
      </div>
    </div>
  </template>
  
  <script>
 import request from "@/utils/request";
  
  export default {
    data() {
      return {
        uploadurl: "/file/upload", 
        uploadMsg:""
      };
    },
    methods: {
      handleBeforeUpload(file) {
        // 手动发送HTTP请求来代替默认的上传行为
        this.uploadFile(this.uploadurl,file);
        return false; // 返回false阻止默认的上传行为
      },
      uploadFile(url, file) {
        const senFile = new FormData()
        senFile.append('file', file);
        // request.put(url, file)
        request({
          url:url,
          method:'put',
          data:senFile
        })
        console.log('文件是',file)

          .then(response => {
            console.log('文件上传成功', response);
            // 处理上传成功的逻辑
          })
          .catch(error => {
            console.error('文件上传失败', error);
            // 处理上传失败的逻辑
          });
      },
    },
  };
  </script>
  
  <style scoped>

  </style>
  